<template>
	<view class="content">
		<view class="balance-head">
			<view class="balance-toast"
				>可提现金额
				<text class="iconfont" @tap="showDialog('提现说明')">&#xe756;</text>
			</view>
			<view class="balance-kiting">
				<view class="first">¥{{ userInfo.balance }}</view>
				<view class="second" @tap="$Router.push('/pages/member/record')">
					提现记录
				</view>
			</view>
		</view>
		<view class="balance-head-before">
			<view class="accumulative">
				<view class="first">¥{{ userInfo.alreadyCommission }}</view>
				<view class="second">累计已入帐</view>
			</view>
			<view class="line"></view>
			<view class="about">
				<view class="first">¥{{ userInfo.notCommission }}</view>
				<view class="second">即将入帐</view>
			</view>
		</view>
		<view class="kiting-account">
			<view class="kiting-account__platform">
				<text class="iconfont">&#xe6ec;</text>
				<text>提现到支付宝</text>
			</view>
			<view class="kiting-account__account" @tap="$Router.push('/pages/member/zfbAccount')">
				<view v-if="whether == 1">
					<text class="name">{{ aliInfo.name }}</text>
					<text>{{ aliInfo.account }}</text>
				</view>
				<view v-else>
					<text>请先绑定支付宝账号</text>
				</view>
				<text class="iconfont">&#xe77c;</text>
			</view>
		</view>

		<view class="kiting-money">
			<view class="kiting-explain">
				<text>提现金额</text>
				<view class="rule" @tap="showDialog('提现规则', 650)">
					<text class="iconfont icon-jinggao"></text>
					<text>提现规则</text>
				</view>
			</view>
			<view class="cell-group">
				<input
					class="uni-input"
					v-model="money"
					type="number"
					@input="onInput"
					@blur="onBlur"
					placeholder="¥ 最小不低于1元"
				/>
				<view class="all-kiting" @tap="money = userInfo.balance">全部提现</view>
			</view>
		</view>
		<view class="kiting-btn" @tap="checkWithdrawals" :class="[{ disabled: moneyDisabled }]">
			确认提现
		</view>

		<!--确认够买-->
		<prop-box
			ref="myDialog"
			:title="title"
			:isBtn="false"
			:height="height"
			:isClose="true"
			@close="close"
		>
			<template>
				<view class="content-box">
					<!--提现说明-->
					<template v-if="title === '提现说明'">
						<view class="title">【提现到账】</view>
						<view class="text"
							>审核通过的申请将在1-3个工作日内自动到账，请耐心等待。</view
						>
						<view class="title">
							【提现通道】
						</view>
						<text class="text">
							提现现金通过支付宝转账给您，请绑定您的支付宝账号。</text
						>
					</template>

					<!--提现规则-->
					<template v-if="title === '提现规则'">
						<view class="text">1、每天最多可提现1次，每月最多可提现30次。</view>
						<view class="text">2、账户余额满1元即可提现。</view>
						<view class="text">3、每次最多可提现500元，每月最高可提现20000元。</view>
						<view class="text">4、存在其他提现问题请及时联系客服处理。</view>
						<view class="know" @tap="closeDialog">知道了</view>
					</template>

					<!--申请成功-->
					<template v-if="title === '申请成功'">
						<view class="succeed">
							<view class="money">¥{{ withdrawMoney | Fixed(2) }}</view>
							<view class="text">提现金额</view>
						</view>
						<view class="text center">
							提现申请已提交成功，系统将会在1-3个工作日内完成审核并通过支付宝转账给您！
						</view>
						<view class="know" @tap="closeDialog">我知道了</view>
					</template>

					<template v-if="errorCode === 1001">
						<view class="text center">
							您的账户异常，请联系客服处理
						</view>
						<view class="know" @tap="callKefu"
							><text class="iconfont icon-kefu">&#xe6c2;</text>联系客服</view
						>
					</template>

					<template v-if="errorCode === 1002 || errorCode === 1003 || errorCode === 1007">
						<view class="text center">
							{{ errorMessage }}
						</view>
						<view class="know" @tap="closeDialog">知道了</view>
					</template>

					<template v-if="errorCode === 1004">
						<view class="text center">
							您本日免费提现次数已达上限<br />请明日再来提现哦～
						</view>
						<view class="know" @tap="closeDialog">知道了</view>
					</template>

					<template v-if="errorCode === 1005">
						<view class="text center">
							您本月免费提现次数已达上限<br />请次月再来提现哦～
						</view>
						<view class="know" @tap="closeDialog">知道了</view>
					</template>

					<template v-if="errorCode === 1006">
						<view class="text center">
							您本月提现金额超过20000元<br />提现点击下方按钮联系客服处理。
						</view>
						<view class="know" @tap="callKefu"
							><text class="iconfont icon-kefu">&#xe6c2;</text>联系客服</view
						>
					</template>
				</view>
			</template>
		</prop-box>

		<!--智能搜索-->
		<ai-search ref="aiSearch"></ai-search>
	</view>
</template>

<script>
import PropBox from '@/components/PropBox';
import { mapGetters } from 'vuex';
export default {
	name: 'balance',
	components: {
		PropBox
	},
	computed: {
		...mapGetters(['userInfo']),
		moneyDisabled() {
			if (this.money > 500) {
				return true;
			} else {
				return (
					this.money > parseFloat(this.userInfo.balance) ||
					this.money === '' ||
					this.money < 1
				);
			}
		}
	},
	data() {
		return {
			money: '',
			withdrawMoney: 0,
			title: '提现说明',
			height: 50,
			errorCode: null,
			errorMessage: null,
			aliInfo: {},
			whether: 0
		};
	},
	watch: {
		userInfo: {
			handler(val) {
				if (Number(this.userInfo.balance) > 1) {
					this.money = this.userInfo.balance;
				}
			},
			immediate: true
		}
	},
	onLoad() {
	},
	onShow() {
		this.getAliInfo();

		this.$nextTick(() => {
			uni.getClipboardData({
				success: res => {
					if (res.data && this.$store.state.common.aiSearch) {
						this.$refs.aiSearch.open(res.data);
						this.$store.commit({
							type: 'setAiSearch',
							aiSearch: false
						});
					}
				}
			});
		});
	},
	onHide() {
		this.$refs.aiSearch.close();
	},
	methods: {
		getAliInfo() {
			this.$service.common.user
				.testingAli()
				.then(res => {
					this.whether = res.whether;
					if (res.whether == 1) {
						this.$service.member.aliAccount
							.info()
							.then(res => {
								this.aliInfo = res;
							})
							.catch(err => {
								uni.showToast({
									title: err.message,
									icon: 'none'
								});
							});
					}
				})
				.catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					});
				});
		},
		showDialog(title, height) {
			this.height = height || 500;
			this.title = title;
			this.$refs['myDialog'].open();
		},
		close() {
			this.errorCode = null;
			this.errorMessage = null;
			this.title = null;
		},
		closeDialog() {
			this.$refs['myDialog'].close();
		},
		callKefu() {
			this.$refs['myDialog'].close();
			this.$Router.push('/pages/member/service');
		},
		onInput(e) {
			let num = e.detail.value;
			if (num.indexOf('.') != -1) {
				let n = num.indexOf('.') + 2;
				this.money = num.slice(0, n);
			}
			return;
			this.money = parseFloat(e.detail.value);
			if (this.money > 500) {
				uni.showToast({
					title: '提现金额不能大于500元！',
					icon: 'none'
				});
				this.money = 500;
			} else if (this.money > parseFloat(this.userInfo.balance)) {
				uni.showToast({
					title: '提现金额不能超过可提现金额！',
					icon: 'none'
				});
				this.money = parseFloat(this.userInfo.balance);
			} else {
				if (num.indexOf('.') != -1) {
					let n = num.indexOf('.') + 2;
					this.money = num.slice(0, n);
				}
			}
		},
		onBlur(e) {
			if (parseFloat(e.detail.value) < 1) {
				this.money = '';
				uni.showToast({
					title: '最低提现金额为1元！',
					icon: 'none'
				});
			}

			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
			});
		},
		// 提现前校验
		checkWithdrawals() {
			this.$service.member.withdraw
				.check({
					amount: this.money,
					app: 'yzf'
				})
				.then(() => {
					this.submitBalance();
				})
				.catch(error => {
					this.errorCode = error.code;
					this.errorMessage = error.message;

					// 您的账户异常，请联系客服
					if (error.code === 1001) {
						this.showDialog('账户冻结', 310);
					}
					// 提现金额不得少于X元
					if (error.code === 1002) {
						this.showDialog('温馨提示', 350);
					}
					// 提现金额不得高于X元
					if (error.code === 1003) {
						this.showDialog('温馨提示', 350);
					}
					// 已超过今日可提现次数
					if (error.code === 1004) {
						this.showDialog('温馨提示', 350);
					}
					// 已超过本月可提现次数
					if (error.code === 1005) {
						this.showDialog('温馨提示', 350);
					}
					// 已超过本月可提现金额
					if (error.code === 1006) {
						this.showDialog('温馨提示', 350);
					}
					// 余额不足
					if (error.code === 1007) {
						this.showDialog('温馨提示', 350);
					}
				});
		},
		// 申请提现
		submitBalance() {
			this.$service.member.withdraw
				.add({
					amount: this.money,
					app: 'hf',
					payWay: 'alipay'
				})
				.then(() => {
					this.withdrawMoney = this.money;
					// 获取用户信息
					// #ifdef H5
					this.$store.dispatch('getUserInfo', { versionCode: 140 });
					// #endif
					// #ifdef APP-PLUS
					plus.runtime.getProperty(plus.runtime.appid, wgtinfo => {
						let params = { ...wgtinfo };
						this.$store.dispatch('getUserInfo', params);
					});
					// #endif
					this.showDialog('申请成功');
					this.money = 0;
				})
				.catch(error => {
					this.errorCode = error.code;
					this.errorMessage = error.message;

					// 您的账户异常，请联系客服
					if (error.code === 1001) {
						this.showDialog('账户冻结', 310);
					}
					// 提现金额不得少于X元
					if (error.code === 1002) {
						this.showDialog('温馨提示', 350);
					}
					// 提现金额不得高于X元
					if (error.code === 1003) {
						this.showDialog('温馨提示', 350);
					}
					// 已超过今日可提现次数
					if (error.code === 1004) {
						this.showDialog('温馨提示', 350);
					}
					// 已超过本月可提现次数
					if (error.code === 1005) {
						this.showDialog('温馨提示', 350);
					}
					// 已超过本月可提现金额
					if (error.code === 1006) {
						this.showDialog('温馨提示', 350);
					}
					// 余额不足
					if (error.code === 1007) {
						this.showDialog('温馨提示', 350);
					}
				});
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background: #f6f7fa;
}
.content {
	.balance-head {
		padding: 64rpx 26rpx 0 40rpx;
		width: 100%;
		height: 230rpx;
		box-sizing: border-box;
		background: rgba(255, 205, 135, 1);
		font-size: 28rpx;
		.balance-kiting {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 24rpx;
			.first {
				font-size: 44rpx;
				font-weight: 500;
			}
			.second {
				font-weight: 500;
				width: 168rpx;
				height: 60rpx;
				background: rgba(255, 255, 255, 1);
				border-radius: 36rpx;
				text-align: center;
				line-height: 60rpx;
			}
		}
	}
	.balance-head-before {
		display: flex;
		align-items: center;
		text-align: center;
		background-color: #ffffff;
		height: 136rpx;
		.accumulative {
			flex: 1;
			.first {
				color: #221d2c;
				font-size: 32rpx;
			}
			.second {
				color: #717076;
				font-size: 24rpx;
			}
		}
		.about {
			flex: 1;
			.first {
				color: #f70114;
				font-size: 32rpx;
			}
			.second {
				width: 118rpx;
				height: 34rpx;
				background: rgba(247, 1, 20, 1);
				border-radius: 22rpx;
				color: #ffffff;
				font-size: 24rpx;
				margin: 0 auto;
			}
		}
		.line {
			width: 2rpx;
			height: 62rpx;
			background-color: #c6c6c6;
		}
	}
	.kiting-account {
		width: 100%;
		height: 172rpx;
		background: #ffffff;
		margin-top: 22rpx;
		.kiting-account__platform {
			display: flex;
			align-items: center;
			margin-left: 40rpx;
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #221d2c;
			.iconfont {
				color: #009fe8;
				font-size: 60rpx;
				margin-right: 32rpx;
			}
		}
		.kiting-account__account {
			color: #221d2c;
			font-size: 28rpx;
			margin-left: 124rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.name {
				margin-right: 40rpx;
			}
			.iconfont {
				margin-right: 36rpx;
			}
		}
	}
	.kiting-money {
		width: 100%;
		height: 234rpx;
		background: rgba(255, 255, 255, 1);
		margin-top: 14rpx;
		padding: 32rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.kiting-explain {
			width: 100%;
			font-size: 28rpx;
			@include flexBox(space-between, center);
			.rule {
				color: #0160f7;
				height: 50rpx;
				@include flexBox(null, center);
				.iconfont {
					margin-right: 4rpx;
					font-size: 28rpx;
				}
			}
		}
		.cell-group {
			display: flex;
			align-items: center;
			height: 80rpx;
			margin-top: 26rpx;
			position: relative;
			border-bottom: 2rpx solid #cccccc;

			.all-kiting {
				position: absolute;
				right: 0;
				color: #f70114;
				width: 150rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 28rpx;
				text-align: right;
			}

			.uni-input {
				height: 60rpx;
				width: 100%;
				font-size: 28rpx;
			}
		}
	}
	.kiting-btn {
		width: 336rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #fff;
		font-size: 28rpx;
		border-radius: 40rpx;
		margin: 56rpx auto 0 auto;
		background: linear-gradient(to right, #f70114, #f77301);
		text-align: center;
		transition: 0.5s;
		&.disabled {
			cursor: not-allowed;
			opacity: 0.5;
		}
	}
}
.content-box {
	padding: 20rpx 40rpx;
	margin-top: 30rpx;
	box-sizing: border-box;
	color: #616161;
	font-size: 28rpx;
	.title {
		margin-bottom: 20rpx;
	}
	.text {
		margin-bottom: 30rpx;
	}
	.center {
		text-align: center;
	}
	.know {
		width: 232rpx;
		line-height: 68rpx;
		color: $color-white;
		background: #f70114;
		border-radius: 50rpx;
		margin: auto;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.iconfont {
			font-size: 38rpx;
		}
	}
	.succeed {
		text-align: center;
		margin-bottom: 50rpx;
		.money {
			font-size: 40rpx;
			font-weight: 600;
			margin-bottom: 10rpx;
		}
	}
}
</style>
